<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图片裁剪</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/base.min.css"/>
    <style>
        .container{
            width: 100%;
            height:300px;
            overflow: hidden;}
        .img-preview{
            width: 150px;
            height: 200px;
            overflow: hidden;
            text-align: center;}
        @font-face {
            font-family: 'iconfont';
            src: url('//at.alicdn.com/t/font_1435133037_150932.eot'); /* IE9*/
            src: url('//at.alicdn.com/t/font_1435133037_150932.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
            url('//at.alicdn.com/t/font_1435133037_150932.woff') format('woff'), /* chrome、firefox */
            url('//at.alicdn.com/t/font_1435133037_150932.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
            url('//at.alicdn.com/t/font_1435133037_150932.svg#iconfont') format('svg'); /* iOS 4.1- */
        }
        .m-ico{
            font-family: 'iconfont';
            display: inline-block;list-style: none;
            font-style: normal;}
        #imgBox-cl{
            font-size: 0;}
        #imgBox-cl button{
            border: none;
            background-color: #f1f1f1;
            display: inline-block;
            font-size: 26px;
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            margin: 2px;}
        #imgBox-cl button.on{
            color: #fff;
            margin-right: 15px;
            background-color: #ff9900;}
        #inputImage{
            overflow: hidden;
            position: absolute;
            width: 100%;
            left: 0;
            top: 0;
            height: 100%;
            opacity: 0;}
        #layer{display: none;}
        #show img{
            width: 100%;}
    </style>
</head>
<body>
<!-- Wrap the image or canvas with a block element -->
<div id="imgBox">
<div class="container"><img src="tx.png"></div>
    <div id="imgBox-cl" class="f-tac" >
        <button class="on f-pr"><i class="m-ico">&#xe606;</i><input id="inputImage" type="file" capture="camera" /></button>
        <button onclick="imgBox.cropper('zoom',0.1)"><i class="m-ico">&#xe600;</i></button>
        <button onclick="imgBox.cropper('zoom',-0.1)"><i class="m-ico">&#xe602;</i></button>
        <button onclick="imgBox.cropper('rotate', -5)"><i class="m-ico">&#xe604;</i></button>
        <button onclick="imgBox.cropper('rotate', +5)"><i class="m-ico">&#xe605;</i></button>
        <button onclick="imgBox.cropper('reset')"><i class="m-ico">&#xe607;</i></button>
    </div>
    <div class="f-p10"><input type="text" style="width:50px;" id="liangdu" value="30" placeholder="亮度值0-100"/> <button class="imgBox-save">合成</button></div>
<!--<div class="img-preview"></div>-->
</div>
<!--图片合成-->
<canvas id="layer"></canvas>
<div id="show"></div>
<link rel="stylesheet" href="cropper/cropper.min.css"/>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="cropper/cropper.min.js"></script>
<script>
    var imgBox= $('.container > img');
    imgBox.cropper({
        aspectRatio: 1.5 / 2,
        data: {
           width: 150,
           height: 200
        },
        autoCropArea: 0.65,
        strict: false,
        guides: false,
        highlight: false,
        dragCrop: false,
        cropBoxMovable: false,
        cropBoxResizable: false,
        preview: '.img-preview',
        crop: function(data) {
            // Output the result data for cropping image.
          // hcPic(imgBox.cropper('getCroppedCanvas'));

        }
    });
//上传图片
    var $inputImage = $('#inputImage'),
            URL = window.URL || window.webkitURL,
            blobURL;
        $inputImage.change(function () {
            var files = this.files,
                    file;
            if (!imgBox.data('cropper')) {
                return;
            }
            if (files && files.length) {
                file = files[0];
                if (/^image\/\w+$/.test(file.type)) {
                    blobURL = URL.createObjectURL(file);
                    imgBox.one('built.cropper', function () {
                        URL.revokeObjectURL(blobURL); // Revoke when load complete
                    }).cropper('reset').cropper('replace', blobURL);
                    $inputImage.val('');
                } else {
                    //showMessage('Please choose an image file.');
                }
            }
        });

</script>
<script>
    $('.imgBox-save').click(function(){
        hcPic(imgBox.cropper('getCroppedCanvas'));
    });

//    var bg=new Image;
//    //img.crossOrigin = 'Anonymous'; //解决跨域
//    bg.src='bg.png';
//    bg.onload=function(){
//        ctx.drawImage(bg,0,0,640,896);
//    }
    var brightness = function (pixels, delta) {

        var d = pixels.data;

        for (var i = 0; i < d.length; i += 4) {
            d[i] += delta;     // red
            d[i + 1] += delta; // green
            d[i + 2] += delta; // blue
        }

        return pixels;

    };
    function hcPic(pic){//合成图片
        var pctx = pic.getContext('2d');
        var imageData = pctx.getImageData(0, 0, pic.width, pic.height);
        brightness(imageData,parseInt($('#liangdu').val()));
        pctx.putImageData(imageData, 0, 0);

        var c=document.getElementById('layer');
        var ctx=c.getContext('2d');
        c.width=640;
        c.height=896;
        ctx.rect(0,0,c.width,c.height);
        ctx.fillStyle='#fff';
        ctx.fill();
        ctx.drawImage(pic,8,425,30,40);
        ctx.drawImage(pic,37,430,34,40);
        ctx.drawImage(pic,80,445,45,50);
        ctx.drawImage(pic,183,405,28,35);
        ctx.drawImage(pic,195,445,40,42);
        ctx.drawImage(pic,412,435,35,40);
        ctx.drawImage(pic,267,428,35,40);
        ctx.drawImage(pic,225,495,50,57);
        ctx.drawImage(pic,280,498,55,68);
        ctx.drawImage(pic,327,468,43,45);
        ctx.drawImage(pic,8,485,50,65);
        ctx.drawImage(pic,380,500,45,45);
        ctx.drawImage(pic,129,420,30,35);
        ctx.drawImage(pic,159,420,30,35);
        ctx.drawImage(pic,135,490,48,55);
        ctx.drawImage(pic,168,557,60,80);
        ctx.drawImage(pic,432,524,54,60);
        ctx.drawImage(pic,475,467,42,45);
        ctx.drawImage(pic,530,473,42,53);
        ctx.drawImage(pic,542,435,26,30);
        ctx.drawImage(pic,575,528,48,52);
        ctx.drawImage(pic,585,440,30,35);
        ctx.drawImage(pic,600,468,48,52);
        ctx.drawImage(pic,507,575,58,70);
        ctx.drawImage(pic,335,580,15*4,20*3.5);
       //加上背景蒙板
        var bg=new Image;
        bg.src='bg.png';
        bg.onload=function() {
        ctx.drawImage(bg, 0, 0, 640, 896);
            var imgData=c.toDataURL();
            console.log(imgData);
            $('#show').html('<img src="'+imgData+'" />');
        };

    }
</script>
</body>
</html>